<template>
    <div id = "menu-third">
      <menu-layer v-ref:menulayer :menu-items.sync ="menuItems"
      :is-show-sub-menu.sync = "isShowMenuFourth">
      </menu-layer>

      <menu-fourth v-ref:menufourth v-echo-page page-name="menu/*/*/*"
      v-show = "isShowMenuFourth">
      </menu-fourth>
    </div>
</template>

<script>
  import * as menuLayer from './menu-layer.vue'
  import * as menuFourth from './menu-fourth.vue'
  import * as EchoKey from '../utils/echo-key'

  export default {
    components: {
      menuLayer,
      menuFourth
    },
    data () {
      return {
        menuItems: [],
        isShowMenuFourth: false
      }
    },
    props: {
      isShowThird: {
        type: Boolean,
        twoWay: true
      }
    },
    [EchoKey.UP] (evt) {
      this.$refs.menulayer.$emit(EchoKey.UP, evt)
    },
    [EchoKey.DOWN] (evt) {
      this.$refs.menulayer.$emit(EchoKey.DOWN, evt)
    },
    [EchoKey.LEFT] (evt) {
      this.$refs.menulayer.$emit(EchoKey.LEFT, evt)
    },
    [EchoKey.RIGHT_ENT] (evt) {
      evt.vm = this.$refs.menufourth
      this.$refs.menulayer.$emit(EchoKey.RIGHT_ENT, evt)
    },
    [EchoKey.FUNC] (evt) {
      if (this.isShowMenuFourth) {
        evt.vm = this.$refs.menufourth
      }
      this.$refs.menulayer.$emit(EchoKey.FUNC, evt)
    }
  }
</script>

<style lang = "less" scoped>
  #menu-third {
    position: relative;
    left: -300px;
    width: 500px;
    /*top: -130px;*/

  }
</style>
